<template>
  <div class="news_content">
    <div class="left_content" ref="left_content">
      <div class="content_title">
        <h1 title="标题" class="news_title">{{news_content.articleName}}</h1>
        <div class="news_label">
          <span title="浏览量68123" class="news_browse"><i class="el-icon-s-platform" style="padding-right: 5px;"></i>68123</span>
          <span title="历史累计评论数95" class="news_comments"><i class="el-icon-chat-round" style="padding-right: 5px;"></i>95</span>
          <span class="news_date"><i class="el-icon-watch" style="padding-right: 5px;"></i>2022-06-29 15:08:12</span>
          <span class="news_copyright">未经作者授权，禁止转载{{this.screenWidth}}</span>
        </div>

      </div>
      <div class="content_news" style="height: auto;" v-html="news_content.articleContent"></div>
    </div>
    <div class="right_content" ref="right_content">

      <div class="news_list">
        <div class="content_card_info_title">
          <span>猜你喜欢</span>
        </div>
        <div class="info_list">
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
          <div class="card_info">
            <div class="card_box">
              <div class="card_img">
                <div class="card_img_title">
                  <div class="card_img_box">
                    <a href="https://www.baidu.com">
                      <img src="../../../assets/1.webp" alt="有什么故事可以给我听啊！">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card_title">
                <a href="https://www.baidu.com">
                  <p title="有什么故事可以给我说啊！" class="news_card_title">有什么故事可以给我说啊！</p>
                </a>
                <div class="upname"><a href="https://www.baidu.com" target="_blank"><span>是你的小葵葵</span></a></div>
                <div class="playinfo">
                  13.7万
                  269
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {queryArticle} from "@/api/web/news/content";

export default {
  name: "news_content",
  data(){
    return{
      w_width:"",
      screenWidth: '',
      screenHeight: '',
      news_content:""
    }
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
      })();
    };
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  methods:{
    queryArticle(id){
      queryArticle(id).then(res=>{
        this.news_content = res.data
      })
    }
  },
  created(){
    // console.log(this.$route.path)
    // console.log(this.$route.params.id)
    this.queryArticle(this.$route.params.id)
  },
  watch:{
    screenWidth:{
      immediate:true, //初始化的时候让handler调用一下
      handler(newValue,oldValue){ // hander什么时候调用？什么时候改变

        if(newValue>oldValue){ //页面放大

          if(newValue< 1681){

            // 获取到 页面缩小了多少
            const w = 1903 - newValue
            // 算出等比例缩小后的宽度
            const left_w = 1100 - w
            //如果小于等于668 直接赋值 668px     大于668px直接赋予 等比例缩小后的值
            if(left_w<=668){
              this.$refs.left_content.style="width:668px"
            }else if(left_w>668){
              this.$refs.left_content.style="width:"+left_w+"px"
            }


            this.$refs.right_content.style="width:350px"
          }else if(newValue >= 1681){
            this.$refs.left_content.style="width:1100px"
            this.$refs.right_content.style="width:411px"
          }

        }else if(newValue<oldValue){ //页面缩小

          if(newValue< 1681){


            // 获取到 页面缩小了多少
            const w = 1920 - newValue
            // 算出等比例缩小后的宽度
            const left_w = 1100 - w
            //如果小于等于668 直接赋值 668px     大于668px直接赋予 等比例缩小后的值
            if(left_w<=668){
              this.$refs.left_content.style="width:668px"
            }else if(left_w>668){
              this.$refs.left_content.style="width:"+left_w+"px"
            }


            this.$refs.right_content.style="width:350px"
          }else if(newValue >= 1681){
            this.$refs.left_content.style="width:1100px"
            this.$refs.right_content.style="width:411px"
          }

        }

      }

    }





  }








}
</script>

<style scoped>
img{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}


.news_content{
  max-width: 2540px;
  min-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  box-sizing: content-box;

  width: auto;
  padding: 0 10px;
}

/*    */
.left_content{
  width: 1100px;

  background-color: #FFFFFF;
  border-radius: 4px;
  letter-spacing: 0;
  padding: 20px;
  margin: 20px 0 0 0;

}
.content_title{
  height: 106px;
  box-sizing: border-box;
  padding-top: 24px;
}
.content_title > span{
  display: inline-block;
}
.news_title{
  line-height: 28px;
  font-size: 20px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: #18191c;
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news_label{
  font-size: 13px;
  color: #9499a0;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 24px;
  line-height: 18px;
}
.news_browse,.news_comments,.news_date{
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
.news_copyright{
  margin-right: 12px;
}
.news_copyright:last-child{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.content_news{
  position: relative;
  font-size: 16px;
}
/deep/.content_news>p{
  margin-bottom: 12px;
  word-break: break-word;
}


/**/
.right_content{
  width: 350px;
  flex: none;
  margin-left: 30px;
  padding-bottom: 20px;
  position: relative;
}
.news_list{
  margin-top: 18px;
}
.content_card_info_title{
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  background-color: #e1e8ef;
  padding: 0 16px;
  font-size: 15px;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: #18191C;
}
.content_card_info_title span{
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-left: 6px;
  font-size: 13px;
  color: #61666D;
}

.info_list{
  margin-top: 18px;
}
.card_info{
  margin-bottom: 12px;
}
.card_box{
  display: flex;
}

.card_img{
  position: relative;
  width: 141px;
  height: 80px;
  border-radius: 6px;
  background: #C9CCD0;
  flex: 0 0 auto;
}
.card_img_title{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}
.card_img_box{
  height: calc(100% + 10px);
  position: absolute;
  width: 100%;
  bottom: 0;
}
.card_img_box a{
  display: block;
  position: absolute;
  top: 10px;
  text-decoration: none;
  outline: none;
}
.card_img_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.card_title{
  margin-left: 10px;
  flex: 1;
  font-size: 13px;
  line-height: 15px;
  width: calc(100% - 151px);
}
.news_card_title{
  color: #18191C;
  display: block;
  font-size: 15px;
  line-height: 19px;
  transition: color 0.3s;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.upname{
  cursor: pointer;
  margin: 2px 0;
  height: 20px;
}
.upname a{
  color: #9499a0;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.upname span{
  width: calc(100% - 24px);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 1;
}
.playinfo{
  color: #9499a0;
  display: inline-flex;
  align-items: center;
}






@media (min-width: 1701px) and (max-width: 2199.9px) {

}
@media (min-width: 1367px) and (max-width: 1700.9px){

}
@media (min-width: 1100px) and (max-width: 1366.9px){

}
@media (max-width: 1099.9px){

}
/*    */
@media (min-width: 1681px){


  .content_title{
    height: 108px;
    padding-top: 22px;
  }
  .news_title{
    line-height: 34px;
    font-size: 22px;
  }
  .news_label{
    font-size: 14px;
    line-height: 20px;
  }



  .right_content{
    width: 411px;
  }
  .content_card_info_title{
    font-size: 16px;
  }
  .content_card_info_title span{
    font-size: 14px;
  }





  .news_list{
    margin-top: 20px;
  }
  .info_list{
    margin-top: 20px;
  }
  .card_info{
    margin-bottom: 16px;
  }
  .card_img{
    width: 189px;
    height: 107px;
  }
  .card_title{
    font-size: 14px;
    line-height: 16px;
    width: calc(100% - 199px);
  }
  .news_card_title{
    font-size: 16px;
    line-height: 20px;
  }
  .upname{
    margin: 4px 0;
  }


}


</style>
